<template>
<div class="bmap" style="width: 100%;">
   <Modal class="modal" width="80%" :styles="{top: '10%', right: '-4%'}" v-model="startplay" :closable="false"  :mask-closable="false">
      <div slot="header" class="closes">
        <Icon type="close" color="#999" size="16" @click.native="ok"></Icon>
      </div>
      <div slot="footer" ></div>
      <div style="margin-bottom: 8px;">
        <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" @on-change="handleChange1" :value="datetime1" placeholder="选择日期和时间" style="width: 200px"></DatePicker>
        <span>-</span>
        <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" @on-change="handleChange2" :value="datetime2"   placeholder="选择日期和时间" style="width: 200px"></DatePicker>
        <Button @click="gettraces(393, datetime1, datetime2)"   type="primary">回放</Button>
      </div>
      <!-- 路书操作按钮 -->
      <div class="lushuButton" v-if="playButton">
        <div class="fl">
          <Icon class="plays"  type="play" @click.native="lushuStart" v-show="suspend" size="16"></Icon>
          <Icon class="plays" type="pause" @click.native="lushuPause" v-show="!suspend" size="16"></Icon>
          <a class="speed" @click="Multiple(400)">1X</a>
          <a class="speed" @click="Multiple(800)">2X</a>
          <a class="speed" @click="Multiple(1600)">3X</a>
        </div>
        <div class="fr">
          <!--开始时间、结束时间-->
          <div> {{timeUpdate | capitalize}} / {{endTimes | capitalize}} </div>
        </div>
        <!-- Slider 滑块 -->
        <div class="playProgress">
          <Slider v-model="value3" :max="value2" :min="0" :tip-format="format" show-tip="hover" @on-change='updateXY'></Slider>
        </div>
      </div>
      <!-- 轨迹弹窗 start -->
      <div style="height: 600px;">
        <div id="bmap" style="height: 100%;"></div>
      </div>
    </Modal>
</div>
</template>

<script>
import axios from 'axios';
import {times, getNowFormatDate} from '../assets/timer.js';
// import {wgs84togcj02, gcj02tobd09} from 'libs/coordinate';
export default {
  props: ['position'],
  data () {
    return {
      // ischeck: false,
      // isback: true,
      playButton: false,
      car_start: '../static/img/qidian1.png', //  轨迹开始图标
      car_end: '../static/img/zhongdian2.png',  //  轨迹结束图标
      car_zp: `../static/img/picpoint_all.png`, // 抓拍
      playbackData: [],
      arrPois: [],
      element: [],
      marker_capture: [],
      value3: 0,
      value2: 0,
      endTimes: '',
      lushu: null,
      startplay: true,
      timeUpdate: '',
      datetime1: '',
      datetime2: '',
      isflag: false,
      suspend: false,
      qwer: true,
      clear: false, //  判断是否清除路书数据，默认false
      alltimes: ''  //  总时间
    };
  },
  watch: {
    timeUpdate: function (val) {
      this.timeUpdate = val;
    },
    endTimes: function (val) {
      this.endTimes = val;
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return false;
      let newtimes = value.substring(11, 19);
      return newtimes;
    }
  },
  beforeDestroy () {
    if (this.lushu) {
      clearInterval(this.lushu._intervalFlag);
    }
  },
  created () {
    let myDate = new Date();
    let dd = Date.parse(myDate);
    this.datetime1 = times(dd, '00:00:00');
    console.log(this.datetime1);
    this.datetime2 = getNowFormatDate();
  },
  mounted () {
    this.$nextTick(() => {
      this.map = new BMap.Map("bmap");
      this.map.enableScrollWheelZoom(); // 启用滚轮缩放
      this.map.centerAndZoom(new BMap.Point(this.position[0], this.position[1]), 16);  // 地图加载默认定位坐标及缩放级别
      this.map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));  //  地图-卫星-三维
      // this.map.setCurrentCity("河南");
      let opts = {offset: new BMap.Size(0, 50), anchor: BMAP_ANCHOR_BOTTOM_RIGHT};  //  地图控件位置
      this.map.addControl(new BMap.NavigationControl(opts));
      this.map.addControl(new BMap.ScaleControl({offset: new BMap.Size(10, 50), anchor: BMAP_ANCHOR_BOTTOM_LEFT}));
    });
  },
  methods: {
    //  关闭轨迹回放窗口
    ok () {
      this.arrPois = [];
      this.element = [];
      this.map.clearOverlays();
      this.playButton = false;
      this.suspend = false;
      // this.$store.dispatch('startplay', false);
      this.$emit('startplays', false)
      this.value3 = 0;  //  v-modal
      this.value2 = 0;  //  max
      // if (this.isflag) {
      //   clearInterval(this.lushu._intervalFlag);
      // }
    },
    handleChange1 (date) {
      this.datetime1 = date;
    },
    handleChange2 (date) {
      this.datetime2 = date;
    },
    //  路数开始
    lushuStart () {
      // if (this.playpause === true) {
      //   this.$Message.info({
      //     content: '当前播放完毕',
      //     duration: 3
      //   });
      //   return false;
      // }
      this.lushu.start();
      this.suspend = false;
    },
    //  路书暂停
    lushuPause () {
      this.lushu.pause();
      this.suspend = true;
    },
    Multiple (add) {
      // this.speed = add;
      // console.log(this.speed);
      this.lushu._opts.speed = add;
      // console.log(this.lushu);
    },
    format (val) {
      if (this.timeUpdate === null) {
        return false;
      }
      // return '当前进度: ' + val + '%';
      return this.timeUpdate.substring(11, 19);
    },
    //  点击抓拍点，打开信息窗口
    captureClick (content, marker) {
      marker.addEventListener("click", function (e) {
        let p = e.target;
        let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); //  窗口经纬度
        let infoWindow = new BMap.InfoWindow(content);  //  创建信息窗口对象
        // this.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
        // EventWrapper.addListener(infoWindow, 'open', function (e) {
        //   let captureImg = document.getElementById('captureImg');
        //   // captureImg.className('captureImg');
        //   // this.$store.commit('VEHICLEID', gui);
        //   captureImg.addEventListener('click', function (e) {
        //     captureImg.classList.add("captureImg");
        //   });
        // });
        // console.log('轨迹');
        this.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
      });
    },
    //  点击回放按钮
    gettraces (vehicleId, starttime, endtime) { //  错误：无法获取到vuex ID
      // console.log('点击回放');
      if (this.isflag) {  //  清除循环
        this.map.clearOverlays();
        clearInterval(this.lushu._intervalFlag);
        this.suspend = false;
        this.element = [];
      }
      //  日期控件验证
      let times = 1000 * 60 * 60 * 24;
      let time1 = new Date(endtime);
      let time2 = new Date(starttime);
      if ((time1.getTime() - time2.getTime()) / times <= 0) {
        this.$Message.info({ content: '开始时间大于结束时间', duration: 3 });
        return false;
      }
      //  日期控件验证
      if ((new Date(endtime) - new Date(starttime)) / times >= 1) {
        this.$Message.info({ content: '不能跨月或跨天查询', duration: 3 });
        return false;
      } else {
        //  请求路书数据
        axios.get('/dsp-vehiclesupervise-api2/api/traceReply.do', {
          params: {
            vehicleId: vehicleId,
            startime: starttime,
            endtime: endtime
          }
        }).then((res) => {
          console.log('请求路书数据');
          this.playbackData = res.data.data;  //  路书数据赋值
          // console.log(res.data.data);
          if (this.playbackData.length === 0) {
            this.$Message.error({ content: '此时间段没有要回放的数据', duration: 3 });
            return false;
          } else {
            this.lushuDefault(this.playbackData);
          }
        });
      }
    },
    addClickHandlers (content, marker) {
      let that = this;
      marker.addEventListener("click", function (e) {
        that.openInfos(content, e);
      });
    },
    openInfos (content, e) {
      var p = e.target;
      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
    },
    //  Slider滑动事件
    updateXY (val) {
      // this.timeUpdate = this.element[val].time;
      this.format();
      //  1. 点击滑块时，清空所有轨迹
      //  2. 获取点击滑块当前的长度值val
      //  3. 将全部数据（length: 300）分为两组，第一组100, 第二组200
      //  4. 第一组数据采用直接加载的方式， 第二组数据采用定时器加载的方式
      // var arr1 = [];  //  需要秒加载的数据，如果总长度是300，点击返回的val是100，那么这100条数据需要秒加载
      // var arr2 = [];  //  需要用定时器循环加载的数据，如果总长度是300，点击返回的val是100，那么剩下的200条数据需要用定时器缓慢加载
      // arr1 = this.playbackData.slice(0, val);
      // arr2 = this.playbackData.slice(val);
      // console.log(this.playbackData, '总数据');
      // console.log(arr1, '秒加载');  //  定时器加载数据
      // console.log(arr2, '慢加载');  //  定时器加载数据
      // this.clearLushu();  //  清除路书数据
      // this.lushuSecond(arr1, val); //  秒加载数据
      // this.lushuLoop(arr2); //  循环慢加载数据
      // this.lushusss();  //  秒加载
      // this.lushusss(this.playbackData);  //  慢加载
    },
    //  路书默认加载方法
    lushuDefault (playbackData) {
      console.log('路书开始行驶...');
      // playbackData = this.playbackData;
      for (var key in playbackData) {
        this.playButton = true;
        let element = playbackData[key];
        // let wgs = wgs84togcj02(element.longitude, element.latitude);
        // let gcj = gcj02tobd09(wgs[0], wgs[1]);
        let latLng = new BMap.Point(element.longitude, element.latitude);  //  经纬度
        this.arrPois = this.arrPois.concat(latLng);
        this.map.setViewport(this.arrPois);
        this.timeUpdate = playbackData[0].time;
        this.endTimes = playbackData[playbackData.length - 1].time;
        // this.map.panTo(new BMap.Point(gcj[0], gcj[1]));
        this.element = this.element.concat(element);
        // this.speed = 200;
        this.lushu = new BMapLib.LuShu(this.map, this.arrPois, {
          speed: 400,  //  速度，单位米每秒
          icon: new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52, 26)), //  声明高铁标注
          autoView: true,
          enableRotation: true
        });
        // this.map.centerAndZoom(new BMap.Point(this.$store.state.position[0], this.$store.state.position[1]), 18);  //  地图加载默认定位坐标及缩放级别
        let self = this;
        BMapLib.LuShu.prototype._move = function (initPos, targetPos, effect) {
          var pointsArr = [initPos, targetPos];  //  点数组
          var me = this;
          var currentCount = 0;
          var timer = 10;
          var step = this._opts.speed / (1000 / timer);
          var initpos = this._projection.lngLatToPoint(initPos);
          var targetpos = this._projection.lngLatToPoint(targetPos);
          var count = Math.round(me._getDistance(initpos, targetpos) / step);
          this._map.addOverlay(new BMap.Polyline(pointsArr, {
            strokeColor: "red",
            strokeWeight: 1,
            strokeOpacity: 0.8
          }));
          me._intervalFlag = setInterval(function () {  //  开始循环
            if (currentCount >= count) {
              clearInterval(me._intervalFlag);
              if (me.i < me._path.length) {
                var datainfo = [];
                var cc = me.i;
                if (self.element.length !== 0) {
                  self.timeUpdate = self.element[0].time;
                  self.endTimes = self.element[self.element.length - 1].time;
                }
                // console.log(me._path[0].lng, me._path[0].lat);
                // self.map.panTo(new BMap.Point(me._path[0].lng, me._path[0].lat));
                if (me._path[0].lng && me._path[0].lat) {
                  var myIcon = new BMap.Icon(self.car_start, new BMap.Size(52, 34));  //  自定义图标
                  var latLng = new BMap.Point(me._path[0].lng, me._path[0].lat);  //  经纬度
                  var marker = new BMap.Marker(latLng, {icon: myIcon});  // 创建标注
                  marker.setZIndex(130);
                  // console.log(me._path[0].lng, me._path[0].lat);
                  // me._map.panTo(new BMap.Point(me._path[0].lng, me._path[0].lat));
                  self.map.addOverlay(marker); // 将标注添加到地图中
                  // self.addClickHandlers(content, marker);
                }
                // if (me.i % 2 === 0) {
                for (var k in self.arrPois[cc]) {
                  // if (me.i % 8 === 0) {
                    // console.log(me.i);
                  var str = self.arrPois[cc][k];
                  self.value3 = me.i;
                  self.value2 = self.element.length;
                  // console.log(self.element[cc].speed);
                  self.timeUpdate = self.element[cc].time;
                  if (me.i % 10 === 0 && me._path.length >= 6) {
                    self.map.panTo(new BMap.Point(me._path[me.i].lng, me._path[me.i].lat));
                  }
                  // self.map.setZoom(18);
                  // self.map.panTo(new BMap.Point(me._path[me.i].lng, me._path[me.i].lat));
                    // self.ele.push(self.element[cc]);
                }
                // }
                self.qwer = false;
                self.isflag = true;
                // self.playpause = false;
                // self.value3 = self.value3 + 1;
                // }
                // self.map.setZoom(18);
                if (me._path.length - me.i <= 2) {
                  me.i = me._path.length;
                  if (self.element.length !== 0) {
                    self.value3 = me._path.length;
                    self.timeUpdate = self.element[me.i - 1].time;
                  }
                  var myIcon2 = new BMap.Icon(self.car_end, new BMap.Size(52, 34));  //  自定义图标
                  var latLng2 = new BMap.Point(me._path[me._path.length - 1].lng, me._path[me._path.length - 1].lat);  //  经纬度
                  var marker2 = new BMap.Marker(latLng2, {icon: myIcon2});  // 创建标注
                  marker2.setZIndex(130);
                  self.map.addOverlay(marker2); // 将标注添加到地图中
                  // self.addClickHandlers(content, marker2);
                  // self.suspend = true;
                  self.qwer = true;
                  // self.playpause = true;
                  // self.map.clearOverlays();
                }
                // }
                for (var i = 0; i < datainfo.length; i++) {
                  // console.log(datainfo);
                  var myIcons = new BMap.Icon(datainfo[0], new BMap.Size(25, 25));  //  自定义图标
                  var latLngs = new BMap.Point(datainfo[1], datainfo[2]);  //  经纬度
                  var markers = new BMap.Marker(latLngs, {icon: myIcons});  // 创建标注
                  let content = `<div id="windowinfo">
                  <div class="commons"><span>车牌号 : </span><span>${self.$store.state.row.vehiclePlateNum}</span></div>
                  <div class="commons"><span>驾驶员 : </span><span>${self.$store.state.row.driverName_Phonenumber}</span></div>
                  <div class="commons"><span>时间 : </span><span>${self.$store.state.row.time}</span></div>
                  <div class="commons"><span>行驶速度 : </span><span>${self.$store.state.row.speed}</span></div>                      
                  <div class="commons"><span>行驶方向 : </span><span>${self.$store.state.row.direction}</span></div>
                  </div>`;
                  //  <div class="commons"><span>总里程 : </span><span>${self.row.runningMiles}</span></div>
                  // self.map.addOverlay(marker);
                  self.map.addOverlay(markers);               // 将标注添加到地图中
                  markers.setZIndex(20);
                  // self.map.panTo(latLngs);
                  // self.map.addOverlay(marker2);
                  self.addClickHandlers(content, markers);
                }
              }
              me._moveNext(++me.i);
            } else {
              currentCount++;
              var x = effect(initpos.x, targetpos.x, currentCount, count);
              var y = effect(initpos.y, targetpos.y, currentCount, count);
              var pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
              if (currentCount === 1) {
                var proPos = null;
                if (me.i - 1 >= 0) {
                  proPos = me._path[me.i - 1];
                }
                if (me._opts.enableRotation === true) {
                  me.setRotation(proPos, initPos, targetPos);
                }
                if (me._opts.autoView) {
                  if (!me._map.getBounds().containsPoint(pos)) {
                    me._map.setCenter(pos);
                  }
                }
              }
              me._marker.setPosition(pos);
              // me._setInfoWin(pos);
            }
          }, timer);
        };
      }
      this.lushu.start();
      // this.map.centerAndZoom(new BMap.Point(113.76762, 34.241957), 17);
      // this.map.clearOverlays();
    },
    //  路书秒加载方法
    lushuSecond (playbackData, val) {
      //  获取时间
      // this.timeUpdate = playbackData[0].time; //  开始时间
      // this.endTimes = playbackData[playbackData.length - 1].time; //  结束时间
      this.value3 = val;  //  点击时，滑块默认位置设置为点击的值
      for (var key in playbackData) {
        this.playButton = true;
        let element = playbackData[key];
        let wgs = wgs84togcj02(element.longitude, element.latitude);
        let gcj = gcj02tobd09(wgs[0], wgs[1]);
        let latLng = new BMap.Point(gcj[0], gcj[1]);  //  经纬度
        this.arrPois = this.arrPois.concat(latLng);
        this.map.setViewport(this.arrPois);
        this.timeUpdate = playbackData[0].time; //  开始时间
        this.endTimes = playbackData[playbackData.length - 1].time; //  结束时间
        this.element = this.element.concat(element);
        this.lushu = new BMapLib.LuShu(this.map, this.arrPois, {
          speed: 400,  //  速度，单位米每秒
          icon: new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52, 26)), //  声明高铁标注
          autoView: true,
          enableRotation: true
        });
        let self = this;
        BMapLib.LuShu.prototype._move = function (initPos, targetPos, effect) {
          var pointsArr = [initPos, targetPos];  //  点数组
          var me = this;
          var currentCount = 0;
          var timer = 10;
          var step = this._opts.speed / (1000 / timer);
          var initpos = this._projection.lngLatToPoint(initPos);
          var targetpos = this._projection.lngLatToPoint(targetPos);
          var count = Math.round(me._getDistance(initpos, targetpos) / step);
          this._map.addOverlay(new BMap.Polyline(pointsArr, {
            strokeColor: "red",
            strokeWeight: 1,
            strokeOpacity: 0.8
          }));
          me._intervalFlag = setInterval(function () {  //  开始循环
            if (currentCount >= count) {
              clearInterval(me._intervalFlag);
              if (me.i < me._path.length) {
                var datainfo = [];
                var cc = me.i;
                if (self.element.length !== 0) {
                  self.timeUpdate = self.element[0].time;
                  self.endTimes = self.element[self.element.length - 1].time;
                }
                if (me._path[0].lng && me._path[0].lat) {
                  var myIcon = new BMap.Icon(self.car_start, new BMap.Size(52, 34));  //  自定义图标
                  var latLng = new BMap.Point(me._path[0].lng, me._path[0].lat);  //  经纬度
                  var marker = new BMap.Marker(latLng, {icon: myIcon});  // 创建标注
                  marker.setZIndex(130);
                  self.map.addOverlay(marker); // 将标注添加到地图中
                }
                for (var k in self.arrPois[cc]) {
                  var str = self.arrPois[cc][k];
                  self.value3 = me.i + val; //  滑动条当前值
                  self.value2 = self.element.length + val;  //  滑动条最大值
                  self.timeUpdate = self.element[cc].time;
                  self.$store.state.row.time = self.element[cc].time.substring(0, 19);
                  self.$store.state.row.direction = self.element[cc].direction;
                  self.$store.state.row.speed = self.element[cc].speed;
                  if (self.$store.state.row.driverName_Phonenumber === '' || typeof self.$store.state.row.driverName_Phonenumber === 'undefined') {
                    self.$store.state.row.driverName_Phonenumber = '暂无';
                  }
                  if (self.element[cc].isworking === 'true') {
                    datainfo[0] = `../static/img/${self.element[cc].chardirection}_g.png`;
                  } else {
                    datainfo[0] = `../static/img/${self.element[cc].chardirection}.png`;
                  }
                  datainfo.push(str);
                }
                self.qwer = false;
                self.isflag = true;
                if (me._path.length - me.i <= 2) {
                  me.i = me._path.length;
                  if (self.element.length !== 0) {
                    self.value3 = me._path.length;
                    self.timeUpdate = self.element[me.i - 1].time;
                  }
                  var myIcon2 = new BMap.Icon(self.car_end, new BMap.Size(52, 34));  //  自定义图标
                  var latLng2 = new BMap.Point(me._path[me._path.length - 1].lng, me._path[me._path.length - 1].lat);  //  经纬度
                  var marker2 = new BMap.Marker(latLng2, {icon: myIcon2});  // 创建标注
                  marker2.setZIndex(130);
                  self.map.addOverlay(marker2); // 将标注添加到地图中
                  self.qwer = true;
                }
                for (var i = 0; i < datainfo.length; i++) {
                  var myIcons = new BMap.Icon(datainfo[0], new BMap.Size(25, 25));  //  自定义图标
                  var latLngs = new BMap.Point(datainfo[1], datainfo[2]);  //  经纬度
                  var markers = new BMap.Marker(latLngs, {icon: myIcons});  // 创建标注
                  let content = `<div id="windowinfo">
                  <div class="commons"><span>车牌号 : </span><span>${self.$store.state.row.vehiclePlateNum}</span></div>
                  <div class="commons"><span>驾驶员 : </span><span>${self.$store.state.row.driverName_Phonenumber}</span></div>
                  <div class="commons"><span>时间 : </span><span>${self.$store.state.row.time}</span></div>
                  <div class="commons"><span>行驶速度 : </span><span>${self.$store.state.row.speed}</span></div>                      
                  <div class="commons"><span>行驶方向 : </span><span>${self.$store.state.row.direction}</span></div>
                  </div>`;
                  self.map.addOverlay(markers); // 将标注添加到地图中
                  markers.setZIndex(20);
                  self.addClickHandlers(content, markers);
                }
              }
              me._moveNext(++me.i);
            } else {
              currentCount++;
              var x = effect(initpos.x, targetpos.x, currentCount, count);
              var y = effect(initpos.y, targetpos.y, currentCount, count);
              var pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
              if (currentCount === 1) {
                var proPos = null;
                if (me.i - 1 >= 0) {
                  proPos = me._path[me.i - 1];
                }
                if (me._opts.enableRotation === true) {
                  me.setRotation(proPos, initPos, targetPos);
                }
                if (me._opts.autoView) {
                  if (!me._map.getBounds().containsPoint(pos)) {
                    me._map.setCenter(pos);
                  }
                }
              }
              me._marker.setPosition(pos);
            }
          }, 0);
        };
      }
      this.lushu.start();
    },
    //  路书循环慢加载方法
    lushuLoop (playbackData, val) {
    },
    //  清除路书数据
    clearLushu () {
      console.log(this.isflag);
      if (this.isflag) {
        console.log('aaaaa');
        this.map.clearOverlays();
        clearInterval(this.lushu._intervalFlag);
        this.suspend = false;
        this.timeUpdate = ''; //  清除时间标记
        // this.element = []; //  清除时间
      }
    }
  }
};
</script>

<style>
  .bmap .ivu-modal-body {
    width: 100%;
  }
  .lushuButton {
    position: absolute;
    top: 12%;
    right: 2%;
    z-index: 9;
    background: #fff;
    width: 200px;
    height: 50px;
    border-radius: 4px;
  }
  .lushuButton .fl {
    float: left;
  }
  .lushuButton .fr {
    float: right;
  }
  .lushuButton .fr {
   padding-right: 4px;
   /* padding-top: 2px; */
    line-height: 26px;
    font-size: 12px;
  }
  .lushuButton .playProgress {
    width: 100%; 
    float: left;
    position: relative;
  }
  .lushuButton .playProgress .ivu-slider-wrap {
    width: 95%;
    margin: 10px 4px;
  }
  .lushuButton .layer {
    background-color: red;
    height: 6px;
    position: absolute;
    top: 10px;
    cursor: pointer;    
   }
  .lushuButton .backColor {
    width: 100%; 
    background: #ccc; 
    height: 6px; 
    margin: 10px 0; 
    border-radius: 4px;
    cursor: pointer;
  }
  .lushuButton .speed {
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-block;
    margin: 2px;
  }
  .lushuButton .plays {
    margin: 4px 2px;
    vertical-align: top;
    cursor: pointer;
  }
  .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;
  }
  /* .bmap .captureImg {
    width: 160px;
    height: 120px;
    display: inline-block;
  } */
  #captureImg {
    width:160px;
    height:120px;
    display:inline-block;
    cursor: pointer;
    /* transform: scale(1) translate(0px, 0px); */
  }
  /* .captureImg {
    width: 500px;
    transform: scale(1.14286) translate(0px, 217.875px);
  } */
  .modal .closes {
    position: absolute;
    right: 16px;
    cursor: pointer;
    top: 14px;
  }
  .modal .ivu-modal-footer, .modal .ivu-modal-header {
    border: none;
    padding: 0;
    text-align: initial;
  }
  .ivu-input {
    font-size: 14px;
  }
</style>